<template>
    <div>
        <el-container class="questionlist">
            <el-main class="question-list-main">
                <el-scrollbar>
                    <el-table class="question-list-table" :data="matchQuestions" style="width: 100%"
                        @row-click="rowClick" :row-class-name="rowClassName">
                        <el-table-column prop="name" label="题号" width=""></el-table-column>
                        <el-table-column prop="type" label="题型" width="60"></el-table-column>
                        <el-table-column v-if="showScoreColumn" prop="" label="得分" width="60">
                            <template #default="{ row: { userquestion }, index }">
                                <!-- CE 的得分是 null -->
                                <span> {{ userquestion?.hasOwnProperty('df') ? userquestion?.df || 0 : "-" }} </span>
                            </template>
                        </el-table-column>
                        <el-table-column v-if="showACColumn" prop="" label="测试点信息" show-overflow-tooltip width="">
                            <template #default="{ row: { userquestion }, index }">
                                <!-- 测试点信息 点击展开详情 -->
                                <div class="AC-detail"
                                    v-on="showDetailedScore ? { click: (e) => { e.stopPropagation(); showACDetail(userquestion) } } : {}">
                                    <el-tag class="question-intable-label" effect="dark"
                                        :class="['bg-' + getResultMeta(userquestion).className, 'margin-left10']">
                                        {{ getResultMeta(userquestion).label }}
                                    </el-tag>
                                    <!-- 仅在展示详细得分时才展示测试点分布 -->
                                    <span v-if="showDetailedScore && Array.isArray(userquestion?.resultdataarr)"
                                        v-for="(e, key) in acgroup(userquestion?.resultdataarr)"
                                        :class="[ALLTYPE[e[0]][1],]" :key="'ac_' + key">
                                        &nbsp; {{ e[0] }}:{{ e[1] }}
                                    </span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="" label="我的提交" show-overflow-tooltip width="90">
                            <template #default="{ row: v, index }">
                                <el-tag class="submit-status" :type="v.userquestion ? 'success' : 'info'" effect="dark"
                                    size="default">
                                    {{ v.userquestion ? "已提交" : "未提交" }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="" label="" width="80">
                            <span>
                                <el-icon>
                                    <Promotion />
                                </el-icon>
                            </span>
                        </el-table-column>
                    </el-table>
                </el-scrollbar>
            </el-main>
            <el-drawer v-model="innerDrawer" direction="rtl" title="测试点信息" :append-to-body="true">
                <template #header>
                    <div class="title">测试点信息</div>
                </template>
                <div class="body" v-if="Array.isArray(testCaseDetail.info)"
                    v-for="(info, infoKey) in subtask(testCaseDetail.info)" :key="'a_' + infoKey">
                    <div class="">Subtask {{ infoKey + 1 }}</div>
                    <div class="">
                        <div class="test-case-container" v-for="(e, k) in info" :key="`b_${k}`"
                            :class="e.tn ? e.tn[1] : ALLTYPE['RE'][1]">
                            <div class="test-case-content">
                                <div class="test-case-head">
                                    <span class="test-case-num font-size14">#{{ k + 1 }}</span>
                                    <span class="test-case-ac" v-text="e.tn ? e.tn[0] : 'RE'"></span>
                                </div>
                                <strong class="test-case-score">{{ e.score }}</strong>
                                <span class="test-case-time font-size13">
                                    {{ time(testCaseDetail.result, [e]) }}/{{ memory(testCaseDetail.result, e) }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-drawer>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { countBy } from 'lodash-es';
import { pairs } from 'underscore';
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { SHOW_AC_STATUS } from '../../../admin/views/data';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import subtask from '../../../util/subtask';
import { ALLTYPE } from '@/util/jianchatime';
import { SMP } from './interface';

// 接收参数
const p = defineProps<{
    questions: Studycodemodel.Iquestion[],
    index?: string | number,
    routername: string,
    userquestion: Studycodemodel.Iuserquestion[],
    match?: SMP["match"]
}>()

const emits = defineEmits(['update:listshow'])

// 问题数据
const matchQuestions = computed(() => {
    return p.questions.map(f => {
        const userquestion = p.userquestion.find(z => z.questionid === f.ID)
        // CE的题目得分是 null
        return { ...f, userquestion }
    })
})

const showACColumn = computed(() => {
    return p.match?.show_ac_status !== SHOW_AC_STATUS.HIDE_AC_SCORE;
});
const showDetailedScore = computed(() => {
    return p.match?.show_ac_status === SHOW_AC_STATUS.SHOW_DETAILED_SCORE
})
const showScoreColumn = computed(() => {
    return p.match?.show_ac_status === SHOW_AC_STATUS.SHOW_SCORE ||
        p.match?.show_ac_status === SHOW_AC_STATUS.SHOW_DETAILED_SCORE;
})

const innerDrawer = ref(false);
const testCaseDetail = ref<Studycodemodel.Iuserquestion>({})
function showACDetail(userquestion: Studycodemodel.Iuserquestion) {
    if (!userquestion) return
    if (!showDetailedScore.value) return
    console.log("userquestion:", userquestion)
    innerDrawer.value = true;
    testCaseDetail.value = userquestion;
}

function time(result: Studycodemodel.Iuserquestion["result"], info: Studycodemodel.Iuserquestion["info"]) {
    if (!Array.isArray(info)) return NaN;
    let t = 0;
    for (let v of info) {
        if (t < Number(v.t)) {
            t = Number(v.t);
        }
    }
    return Math.floor(t) + "ms";
}
function memory(result: Studycodemodel.Iuserquestion["result"], info: Studycodemodel.Iuserquestioninfo) {
    if (typeof info.memory === "number") {
        return info.memory / 1024 < 1
            ? Math.floor(info.memory) + "kb"
            : Math.floor(info.memory / 1024) + "mb";
    } else if (typeof info.memory === "object") {
        return "4kb";
    }
    return info.memory || "4kb";
}

function acgroup(data?: Array<keyof Studycodemodel.IALLTYPE>) {
    if (Array.isArray(data)) {
        const c = countBy(data, (a) => a)
        return pairs(c)
    }
    return []
}

const router = useRouter()
const selectedRow = ref<Studycodemodel.Iquestion>();
function rowClick(row: any, column: any, event: Event) {
    const to = { params: { index: row.rowIndex }, }
    router.push(to)
    // 点击后隐藏列表
    emits('update:listshow', false)
}

function rowClassName({ row, rowIndex }: { row: Studycodemodel.Iquestion, rowIndex: number }): string {
    row.rowIndex = rowIndex
    let className = 'cursor-pointer'
    if (selectedRow.value == row || rowIndex == p.index) {
        className = 'highlight-row cursor-pointer';
    }
    return className;
};

// 根据配置返回比较文字
function getResultMeta(userquestion: Studycodemodel.Iuserquestion) {
    const mode = p.match?.show_ac_status;
    let label = '-', className = 'WT';
    if (!userquestion) return { label, className };
    if (mode === SHOW_AC_STATUS.SHOW_FULL_AC) {
        const allAC = userquestion.resultdataarr?.every(v => v === 'AC');
        className = allAC ? 'AC' : 'UN';
        label = allAC ? '通过' : '未通过';
    } else {
        className = userquestion.resultdata || 'UN';
        label = ALLTYPE[className]?.[1] || '未通过';
    }
    return {
        label,
        className: ALLTYPE[className]?.[1] || 'WT'
    };
}
</script>


<style scoped>
.questionlist {
    /* height: 80vh; */
    padding: var(--container-margin)*2 0;

    --container-margin: 20px;
}

.question-list-main {
    padding: 0
}

.question-list-table {
    /* header nav height:64px */
    height: calc(100vh - 64px - var(--container-margin)*4);
    padding-top: 0;
    padding-bottom: 0;
}

.AC-detail {
    display: flex;
    align-items: center;
}

.df,
.submit-status {
    margin: 4px;
    padding: 0 10px;
    box-sizing: border-box;
    width: 50px;
    height: 28px;
    border-radius: 4px;
    box-shadow: var(--el-box-shadow-light);
}

.title {
    line-height: 24px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    padding-top: 20px;
    margin-left: 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.body {
    margin-left: 20px;
}

/* 测试点 */
.test-case-container {
    width: 108px;
    height: 104px;
    /* padding: 5px; */
    margin: 5px;
    display: inline-block;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

.test-case-container .test-case-content {
    border-top-width: 4px;
    border-top-style: solid;
}


.test-case-content .test-case-num {
    padding-left: 8px;
    padding-right: 4px;
    color: #909399 !important;
}

.test-case-content .test-case-score {
    font-size: 36px;
    display: block;
    text-align: center;
}

.test-case-content .test-case-time {
    display: block;
    text-align: center;
    color: #909399 !important;
}
</style>

<style>
#match-header-container .el-drawer.ltr {
    top: 100px;
    height: calc(100vh - 100px);
}
</style>